/**
 * 自定义webpack打包规则
 */
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  // 设置环境模式
  mode: 'production',
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    // [hash]/[hash:8]: 为打包后的文件创建哈希值
    // 代码一旦修改，生成的文件名中的哈希值也会变化
    filename: '[name].[hash:8].js',
    path: path.resolve(__dirname, './dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 指定页面模板
      template: './public/index.html',
      // 打包后的文件名字
      filename: 'index.html',
      // 是否压缩
      minify: true,
    }),
    // 清除之前打包的内容
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "main.[hash:8].css"
    })
  ],
  devServer: {
    host: '127.0.0.1',
    port: 3000,
    open: true, // 自动打开浏览器
    hot: true, // 热更新
    compress: true, // 开启服务器的GZIP压缩
    proxy: {
      "/jian": {
        target: "https://www.jianshu.com/asimov",
        pathRewrite: { "^/jian": "" },
        changeOrigin: true,
        ws: true, // 支持webscoket通信机制
      },
      "/zhi": {
        target: "https://news-at.zhihu.com/api/4",
        pathRewrite: { "^/zhi": "" },
        changeOrigin: true,
        ws: true, // 支持webscoket通信机制
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.(css|less)$/i,
        use: [
          // "style-loader",
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "less-loader"
        ]
      },
      {
        test: /\.js$/i,
        use: [
          "babel-loader"
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'javascript/auto',
        use: [{
          loader: 'url-loader',
          options: {
            limit: 200 * 1024,
            esModule: false,
            name: 'images/[name].[hash].[ext]'
          }
        }]
      }
    ]
  },
  performance: {
    maxAssetSize: 100 * 1024 * 1024 * 1024,
    maxEntrypointSize: 100 * 1024 * 1024 * 1024,
  },
  // 解析器
  resolve: {
    // 设置别名
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
}